<template>
	<view>
		<view class="top"></view>
		<view class="bottom">
			<view class="content">
				<view class="success-icon">
					<image src="/static/支付成功.png" mode=""></image>
				</view>
				<view class="text">支付成功</view>
				<view class="price">￥{{ payAmount }}</view>
				<view class="numbering">预约编号：{{ orderNo }}</view>
				<view class="button">
					<button type="primary" @click="navigateHome">返回首页</button>
					<button type="primary" @click="navigateOrderDetail">订单详情</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payAmount: '0.00',
				orderNo: '',
				homePath: '/pages/index/index' // 首页路径（已确认正确）
			}
		},
		onLoad(options) {
			// 接收并赋值支付金额、订单号
			if (options.payAmount) this.payAmount = options.payAmount;
			if (options.orderNo) this.orderNo = options.orderNo;
			console.log('首页目标路径:', this.homePath);
		},
		methods: {
			// 直接用reLaunch跳转（关闭所有页面，稳定返回首页，已验证可行）
			navigateHome() {
				uni.reLaunch({
					url: this.homePath,
					success: () => {
						console.log('成功通过reLaunch跳转到首页');
					},
					fail: (err) => {
						console.error('首页跳转失败:', err);
						uni.showToast({
							title: '首页跳转失败，请重试',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			// 订单详情跳转（保留原逻辑，已验证路径格式）
			navigateOrderDetail() {
				uni.navigateTo({
					url: `/pages/car_wash/order/order?orderNo=${this.orderNo}`,
					fail: (err) => {
						console.error('订单详情跳转失败:', err);
						uni.showToast({
							title: '订单详情跳转失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.top{ height: 25vh; background-color: #1f73f1; }
	.bottom{ padding: 20rpx; background-color: #f8f8f8; min-height: 75vh; }
	.content{
		display: flex; flex-direction: column; align-items: center;
		background-color: #ffffff; padding: 100rpx 50rpx;
		border-radius: 35rpx; transform: translateY(-330rpx);
	}
	.success-icon{ width: 150rpx; height: 150rpx; margin-bottom: 40rpx; }
	.success-icon image{ width: 150rpx; height: 150rpx; }
	.text{ font-size: 40rpx; margin-bottom: 20rpx; font-weight: bold; }
	.price{ font-size: 60rpx; margin: 30rpx 0 40rpx; font-weight: bold; color: red; }
	.numbering{ font-size: 30rpx; margin-bottom: 40rpx; font-weight: bold; }
	.button{ margin-top: 30rpx; width: 500rpx; }
	button{
		margin-bottom: 30rpx; height: 80rpx; line-height: 40px;
		font-size: 32rpx; border-radius: 40rpx;
	}
	.button button:nth-child(1){ background-color: #0c65e8; }
	.button button:nth-child(2){ background-color: #bfbfbf; }
</style>